@import "common";

/* S banner */
.banner{
    margin-top: 55px;
    height: 80vh;
    position: relative;
    background-attachment: fixed;
    &::after{
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #00b89321;
        
        position: absolute;
    }
    &::before{
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(to bottom, transparent 90%,rgba(0, 0, 0, 0.3));
        position: absolute;
    }
        .banner_content{
            height: 100%;
            position: relative;
            z-index: 99;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 2.5rem;
            h2{
                padding-bottom: 4rem;
                font-weight: 600;
                display: none;
                text-align: center;
            }
            p{
                margin-top: 2rem;
                font-size: 2rem;
                text-align: center;
                font-weight: 600;
                display: none;
            }
            .banner_btn{
               position: absolute;
               font-size: 4rem;
               display: none;
               bottom: 5rem;
               i{
                color: white;
               }
            }
        }
    
}

/* E banner */



/* S content */
.content_flex{
    display: flex;
    margin-top: 5rem;
    .content_blog{
        flex: 1;
        padding: 2rem 4rem 2rem 6rem;
        .content_blog_list{
            width: 100%;
            .blog_list_item{
                margin: 4rem 0;
                width: 100%;
                height: 28rem;
                border: 1px solid $s_color;
                border-radius: 2rem;
                box-shadow: 0px 0px 10px $s_color;
                display: flex;
                cursor: pointer;
                transition: 0.5s;
                &:hover{
                    box-shadow: 0px 0px 20px $d_color;
                }
                &:hover .blog_img_frame img{
                    transform: scale(1.1);
                }
                .blog_img_frame{
                    height: 100%;
                    width: 39rem;
                    border-radius: 2rem 0rem 0rem 2rem;
                    overflow: hidden;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: 0.5s;
                    }
                    &::after{
                        content: '';
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        background: linear-gradient(to right,transparent 65%,rgba(255, 255, 255, 0),#fff);
                    }
                }
                .blog_info_frame{
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                    justify-content: center;
                    padding: 3rem 3rem 2rem 3rem;
                    .blog_title{
                        width: 40rem;
                        font-size: 2rem;
                        color: $d_color;
                        font-weight: 600;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .blog_info{

                        padding: 1rem 0rem;
                        p{
                            color: $gray;
                            width: 45rem;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                    .blog_description{
                        flex: 1;
                        p{
                            padding: 1rem 1rem;
                            text-indent: 2em;
                            font-size: 1.4rem;
                            height: 13rem;
                            line-height: 2.5rem;
                            letter-spacing: 0.1rem;
                            color: rgb(63, 63, 63);
                            overflow: hidden;
                        }
                    }
                    .blog_tags{
                        i{
                            font-size: 1.6rem;
                        }
                        span{
                            margin: 0rem 0.5rem;
                            color: $gray;
                        }
                    }
                }
            }
            .laypage{
                display: flex;
                justify-content: center;
            }
        }
    }

    .content_aside{
        width: 37rem;
        margin-top: 6rem;
        .content_aside_user{
            border: 1px solid $s_color;
            box-shadow: 0px 0px 10px $s_color;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 4rem 0;
            border-radius: 2rem;
            transition: 0.5s;
            &:hover{
                box-shadow: 0px 0px 20px $d_color;
            }
            .user_img_frame{
                width: 13rem;
                height: 13rem;
                border-radius: 50%;
                overflow: hidden;
                border: 1px solid $s_gray;
                transition: 0.5s;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                }
                &:hover{
                    transform: rotateZ(360deg);
                }
            }
            .user_name{
                padding: 1rem 0rem;
                font-size: 2rem;
                color: $d_color;
            }
            .user_description{
                padding: 0rem 6rem;
                text-indent: 2em;
                color: $gray;
                font-size: 1.4rem;
            }
            .user_func{
                display: flex;
                justify-content: center;
                .user_func_box{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin: 0rem 1rem;
                    margin-top: 4rem;
                    cursor: pointer;
                    i{
                        font-size: 2.5rem;
                    }
                    span{
                        margin-top: 1rem;
                    }
                }
            }
        }
        .content_aside_notice{
            margin-top: 3rem;
            border: 1px solid $s_color;
            box-shadow: 0px 0px 10px $s_color;
            border-radius: 2rem;
            padding: 2rem;
            transition: 0.5s;
            &:hover{
                box-shadow: 0px 0px 20px $d_color;
            }
            .aside_module_title{
                color: $d_color;
                font-size: 2rem;
                letter-spacing: 0.5rem;
                font-weight: 600;
                i{
                    font-size: 2.5rem;
                }
            }
            .aside_module_content{
                padding: 2rem;
                .notice_text{
                    min-height: 10rem;
                    text-indent: 2em;
                    font-size: 1.4rem;
                    color: $gray;
                    
                }
            }
        }
        
    }
    
}

/* E content */

/*  S category_content */
.content{
    min-height: 1000px;
}
.category_content{
    
    margin: 10rem;
    h2{
        padding-top: 2rem;
        font-size: 3rem;
        color: $d_color;
        font-weight: 600;
        padding-bottom: 3rem;
        border-bottom: 1px solid $s_gray;
    }
    .category_top{
        display: flex;
        align-items: center;
        margin-top: 2rem;
        label{
            color: $gray;
        }
        .category_select_frame{

            select{
                width: 20rem;
                padding: 1rem 1rem;
                outline: none;
                border-radius: 0.8rem;
                border: 1px solid $s_gray;
                color: $d_color;
            }
        }
        .search_frame{
            display: flex;
            align-items: center;
            margin-left: 10rem;
            .search_input_frame{
                border: 1px solid $s_gray;
                padding: 0.2rem 1rem;
                margin-left: 2rem;
                border-radius: 0.8rem;
                position: relative;
                input{
                    width: 25rem;
                    border: none;
                    outline: none;
                    padding: 0.8rem 0rem;
                }
                .search_btn{
                    position: absolute;
                    right: 0.5rem;
                    top: 25%;
                }
            }
        }
    
    }
    .blog_box_frame{
        .blog_box_list{
            display: flex;
            flex-wrap: wrap;
            margin-top: 4rem;
            .blog_item{
                margin: 4rem 2rem;
                width: 35rem;
                border-radius: 1rem;
                box-shadow: 0px 0px 10px $gray;
                transition: 0.5s;
                &:hover{
                    box-shadow: 0px 0px 20px $gray;
                }
                &:hover .blog_item_img img{
                    transform: scale(1.1);
                }
                
                .blog_item_img{
                    width: 100%;
                    height: 24rem;
                    overflow: hidden;
                    border-radius: 1rem 1rem 0rem 0rem;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                        transition: 0.5s;
                    }
                }
                .blog_item_info{
                    padding: 2rem;
                    h4{
                        font-size: 1.8rem;
                        color: $d_color;
                    }
                    p{
                        font-size: 1rem;
                        color: $gray;
                    }
                }
            }
        }
    }
    
}
/*  E category_content */







/* S 标签页面 */
.tags{
    margin: 10rem;
    padding: 2rem;
    h2{
        padding-top: 2rem;
        font-size: 3rem;
        color: $d_color;
        font-weight: 600;
        padding-bottom: 2rem;
        border-bottom: 1px solid $s_gray;
    }
    .tags_list{
        margin-top: 2rem;
        padding: 1rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .tags_item{
            width: 30rem;
            height: 20rem;
            box-shadow: 0px 0px 10px $gray;
            border-radius: 1rem;
            margin: 2rem;
            margin-bottom: 4rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: rgb(255, 255, 255);
            font-size: 2rem;
            font-weight: 600;
            padding-top: 2rem;
            position: relative;
            z-index: 10;
            .tags_count{
                margin-top: 2rem;
                width: 8rem;
                border-radius: 1.25rem;
                background-color: white;
                padding: 0.25rem;
                color: $gray;
                text-align: center;
            }
            .tags_icon{
                margin-top: 2rem;
                i{
                    color: white;
                }
            }
            .tags_article{
                position: absolute;
                top: 100%;
                left: 0;
                width: 0rem;
                overflow: hidden;
                height: 0;
                transition:  0.4s;
                border: 1px solid $s_gray;
                background-color: white;
                &::-webkit-scrollbar {/*滚动条整体样式*/
                    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
            
                }
                &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                    border-radius: 20px;
                    -webkit-box-shadow: inset 0 0 5px $d_color;
                    background: $d_color;
                }
                &::-webkit-scrollbar-track {/*滚动条里面轨道*/
                    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                    border-radius: 0;
                    background: rgba(0,0,0,0.1);
                }
                .tags_article_list{
                    min-height: 20rem;
                    
                    .tags_article_item{
                        color: $gray;
                        border-bottom: 1px solid $s_gray;
                        display: flex;
                        a{
                            width: 100%;
                            padding: 1rem;
                            transition: 0.5s;
                            font-size: 1.4rem;
                            &:hover{
                                background-color: $d_color;
                                color: white;
                            }
                        }
                    }
                }
            }
            &:hover{
                z-index: 999;
            }
            &:hover .tags_article{
                height: 15rem;
                overflow-y: auto;
                width: 30rem;
            }

        }
    }
}

/* E 标签页面 */












